<template>
  <div class="keyboard" v-show="dialogVisible">
    <div v-if="btn" class="button" v-show="btn" @click="openGame">{{ text }}</div>
    <div
      v-else
      style="color:#fff; font-size:70px; display:flex; justify-content:center; align-items:center "
    >
      {{ text }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      difficultyList: [
        {
          difficulty: 0,
          title: "入门",
        },
        {
          difficulty: 1,
          title: "简单",
        },
        {
          difficulty: 2,
          title: "中等",
        },
        {
          difficulty: 3,
          title: "困难",
        },
        {
          difficulty: 4,
          title: "专家",
        },
        {
          difficulty: 5,
          title: "大师",
        },
        {
          difficulty: 6,
          title: "特级大师",
        },
      ],
      dialogVisible: true,
      ruleForm: {
        type: 4,
        difficulty: 0,
        bg: 1,
      },
      rules: {},
      ksgame: 4,
      text: "开始游戏",
      timer: null,
      btn: true,
      power: 0, //体力
    };
  },
  methods: {
    openGame() {
      this.$emit("getPower");
      if (this.timer == null && this.power > 0) {
        this.$alert("请直接输入英文消灭相应的外星人，每局有三次机会呦！", "提示", {
          confirmButtonText: "确定",
          callback: () => {
            this.timer = setInterval(() => {
              this.ksgame--;
              this.text = this.ksgame;
              this.btn = false;
              if (this.ksgame == 0) {
                this.submitCheck();
                clearInterval(this.timer);
                this.timer = null;
                this.text = "开始游戏";
                this.ksgame = 4;
                this.btn = true;
              }
            }, 1000);
          },
        });
      } else {
        this.$alert("体力不足，请稍后再试哦~", "消息提示", {
          confirmButtonText: "确定",
          callback: () => {
            this.$router.push("/studyIndex");
          },
        });
      }
    },
    submitCheck() {
      this.$emit("startGame", this.ruleForm);
      this.dialogVisible = false;
    },

    openDialog() {
      this.dialogVisible = true;
    },
  },
  created() {
    this.$bus.$on("power", (val) => {
      this.power = val;
    });
  },
  props: {
    wordNum: {
      type: Object,
      default: function() {
        return {
          totalNumber: 0,
          newWord: 0,
          knowWord: 0,
          studyWord: 0,
        };
      },
    },
  },
};
</script>

<style scoped>
.keyboard {
  position: fixed;
  width: 100%;
  height: 88.7%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
}
.button {
  width: 240px;
  height: 60px;
  background: #1472ff;
  color: #fff;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
</style>
